<template>
	<view class="content" :style="{ marginTop: barTop + 'rpx' }">
		<view style="font-size: 25px;">
			记录今日美食
		</view>
		<view style="display: flex;justify-content: space-between;height: 5%;align-items: center;">
			<view>
				<text style="font-size: 16px;" @click="confirm">取消</text>
			</view>
			<view>
				<button
					style="height: 80%;width: 100%;font-size: 16px;display: flex;align-items: center;background-color: #67C23A ;color: #FFF;"
					@click="submit">发布</button>
			</view>
		</view>
		<view style="height: 90%;width: 100%;">
			<view>
				<u-upload ref="uUpload" :action="action" :auto-upload="true" :header="header"></u-upload>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	import {
		getToken
	} from '@/utils/auth'
	import {
		addEating
	} from '../../api/bot/eating';
	export default {
		data() {
			return {
				barTop: 0,
				groupId: '',
				action: config.baseUrl + '/common/upload',
				header: ''
			}
		},
		created() {
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 2.获取状态栏高度
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			// 4.计算出导航栏高度  换算成rpx
			let navHeight = (menuButton.height + (menuButton.top - statusBarHeight) * 2) * (750 / windowWidth);
			// 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx'; 
			const statusBarTop = statusBarHeight * (750 / windowWidth);
			this.barTop = statusBarTop;
			this.header = this.header || {}
			if (getToken()) {
				this.header['Authorization'] = 'Bearer ' + getToken()
			}
			uni.getStorage({
				key: 'groupIdByIndex',
				success: (res) => {
					let data = JSON.parse(res.data);
					this.groupId = data.id;
				}
			});
		},
		methods: {
			submit() {
				uni.showLoading({
					title: "正在发布"
				})
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				let files = [];
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				let sysFileInfos = []
				files.forEach(element => {
					const result = element.response;
					let temp = {
						fileName: result.newFileName,
						fileLocation: result.fileName,
						fileUrl: result.url
					}
					sysFileInfos.push(temp);
				})
				let formData = {
					sysFileInfos: sysFileInfos,
					groupId: this.groupId
				}
				addEating(formData).then(res => {
					if (res.code == 200) {
						this.$store.commit('SET_PUBLISHCONTENTTYPE', 1)
						this.$store.commit('IS_REFRESH', true)
						this.$tab.switchTab('/pages/index')
						this.$modal.msgSuccess("发布成功")
					} else {
						this.$modal.msgError("发布失败")
					}
					uni.hideLoading()
				})
			},
			confirm() {
				let fileArr = this.$refs.uUpload.lists;
				if (fileArr.length > 0) {
					this.$modal.confirm('确定放弃编辑内容吗？').then(() => {
						uni.navigateBack()
						this.filesArr = [];
					})
				} else {
					uni.navigateBack()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding: 5rpx 15rpx;
	}
</style>